<template>
  <!-- 底部部分 -->
  <footer class="footer">
    <span class="todo-count">
      <strong></strong>剩余{{ remain }}</span>
    <ul class="filters">
      <li>
        <a :class="{selected : logo === 'all' }" href="#/" @click="threecheckonefn('all')">全部</a>
      </li>
      <li>
        <a :class="{selected : logo === 'running' }" href="#/active" @click="threecheckonefn('running')">进行中</a>
      </li>
      <li>
        <a :class="{selected : logo === 'completed' }" @click="threecheckonefn('completed')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearCompletedFn">
      清除已完成
    </button>
  </footer>
</template>
<script>
import { mapGetters, mapState } from 'vuex'

export default {
  // data () {return {}},
  computed: {
    ...mapGetters('todo', ['remain']),
    ...mapState('todo', ['logo'])
  },
  methods: {
    threecheckonefn (logo) {
      // console.log(logo)
      this.$store.commit('todo/threeCheckFn', logo)
    },
    clearCompletedFn () {
      this.$store.commit('todo/clearCompletedFn')
    }
  }

}
</script>
